<template>
	<view style="height: 100vh;">
		<u-navbar title-color="#333" title-bold title-size="36" title="在线咨询" :border-bottom="false"></u-navbar>
		<view class="" :class="emojiShow||moreShow?'maindiv_emoji':'maindiv'">
			<view class="shipindiv" @click="call(2)" v-if="shoudaoshow">
				邀请您音视频通话
			</view>

			<scroll-view scroll-y :scroll-into-view="currentMessage" :refresher-enabled="true"
				@refresherrefresh="refresh" :refresher-triggered="refreshFlag"
				:class="emojiShow||moreShow?'sv_emoji':'sv'">
				<view v-for="(item,index) in messageData.messageList" :key="index">
					<!-- 文字消息 -->
					<view class="c1" :id="'id'+index" v-if="item.flow=='in'&&item.type=='TIMTextElem'">
						<view>
							<image :src="avatar" class="c2"></image>
						</view>
						<view class="c3">
							<!-- <view class="c4"></view> -->
							<view class="c5">{{item.payload.text}}</view>
						</view>
					</view>
					<view class="c1" :id="'id'+index" v-if="item.flow=='in'&&item.type=='TIMImageElem'">
						<view>
							<image :src="avatar" class="c2"></image>
						</view>
						<image :src="item.payload.imageInfoArray[1].imageUrl" mode="aspectFill"
							@click="previewImage(item.payload.imageInfoArray[1].imageUrl)"
							style="width: 400rpx;margin-left: 30rpx;height: 200rpx;"></image>
					</view>
					<view class="c1" :id="'id'+index" v-if="item.flow=='in'&&item.type=='TIMVideoFileElem'">
						<view>
							<image :src="avatar" class="c2"></image>
						</view>
						<video :src="item.payload.videoUrl"
							style="width: 400rpx;margin-right: 30rpx;height: 200rpx;"></video>
					</view>
					<view class="c1" :id="'id'+index" v-if="item.flow=='in'&&item.type=='TIMCustomElem'">
						<view>
							<image :src="avatar" class="c2"></image>
						</view>
						<view class="c3" @click="call(1)">
							<view class="c5">[视频通话]</view>
						</view>
					</view>



					<view class="d3" v-if="item.flow=='out'&&item.type=='TIMCustomElem'" :id="'id'+index">
						<view class="c3_1" @click="call(1)">
							<view class="c5_1">[视频通话]</view>
						</view>
						<view>
							<image :src="myProfile.image" class="c2"></image>
						</view>
					</view>
					<view class="d3" v-if="item.flow=='out'&&item.type=='TIMTextElem'" :id="'id'+index">
						<view class="c3_1">
							<view class="c5_1">{{item.payload.text}}</view>
						</view>
						<!-- <view class="c4_1"></view> -->
						<view>
							<image :src="myProfile.image" class="c2"></image>
						</view>
					</view>
					<!-- 图片消息 -->
					<view class="d3" v-if="item.flow=='out'&&item.type=='TIMImageElem'" :id="'id'+index">
						<image :src="item.payload.imageInfoArray[1].imageUrl" mode="aspectFill"
							@click="previewImage(item.payload.imageInfoArray[1].imageUrl)"
							style="width: 400rpx;margin-right: 30rpx;height: 200rpx;"></image>
						<view>
							<image :src="myProfile.image" class="c2"></image>
						</view>
					</view>
					<!-- 视频消息 -->
					<view class="d3" v-if="item.flow=='out'&&item.type=='TIMVideoFileElem'" :id="'id'+index">
						<video :src="item.payload.videoUrl"
							style="width: 400rpx;margin-right: 30rpx;height: 200rpx;"></video>
						<view>
							<image :src="myProfile.image" class="c2"></image>
						</view>
					</view>

				</view>
				<!-- 占位符 -->
				<view style="height: 30rpx;"></view>
			</scroll-view>

		</view>
		<!-- 输入框 -->
		<view class="c6">
			<!-- <view class="c7" @click="call">&#xe6fc;</view> -->
			<view>
				<input type="text" :class="message?'c8':'c8_1'" v-model="message" />
			</view>
			<view class="c9" @click="emojiShowClick">&#xec80;</view>
			<view class="d2" v-if="!message" @click="moreShowClick">&#xe603;</view>
			<uni-transition :show="message" modeClass="slide-right">
				<view class="d1" v-if="message" @click="sendMessage">发送</view>
			</uni-transition>
		</view>
		<!-- 表情包 -->
		<view v-if="emojiShow" class="emoji">
			<view v-for="(item,index) in emoicon" :key="index" @click="emojiClick(item)">
				<view class="emoji_img">{{item}}</view>
			</view>
			<!-- 占位 -->
			<view style="height: 120rpx;"></view>
		</view>
		<!-- 更多 -->
		<view v-if="moreShow" class="e3">
			<view class="e4" @click="sendImage">
				<view class="e5">&#xe626;</view>
				<view class="e6">图片</view>
			</view>

			<view class="e4" @click="sendVideo">
				<view class="e5">&#xe622;</view>
				<view class="e6">视频</view>
			</view>
			<view class="e4" @click="call(1)">
				<view class="e5">&#xe6fc;</view>
				<view class="e6">视频通话</view>
			</view>
		</view>

	</view>
</template>

<script>
	import TIM from '../../static/IM-SDK/tim-wx.js'
	// import TRTC from "../../static/IM-SDK/trtc-wx.js"
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = true;

	export default {
		data() {
			return {
				shoudaoshow: false,
				autoHeight: 0,
				messageData: '',
				nick: '',
				avatar: '',
				message: '',
				scrollHeight: '',
				conversationId: '',
				currentMessage: '',
				myProfile: '',
				//刷新标记
				refreshFlag: false,
				//对方UserID
				userId: '',
				//是否已操作求简历消息
				resumeFlag: false,
				//是否已操作换微信消息
				weChatFlag: false,
				//表情显示
				emojiShow: false,
				emoicon: ["😁", "😋", "😜", "😉", "😌", "😅", "😳", "😊", "😝", "😰", "😠", "😩", "😲", "😞", "😭", "😍",
					"😖", "😱", "😡", "😚", "😤", "🐼", "🐲", "😺", "😸", "😹", "😽", "🙀", "🐴", "🐮", "🍺", "🔥",
					"💔", "🉑", "💢", "💣", "💩", "💪", "👍", "👊", "👋", "👌", "👐"
				],
				//更多显示
				moreShow: false,
				// 记录状态,录音中或者是未开始
				isRecord: false,
				intervalTime: 0,
				timer: '',
				sendVioceFlag: false,
				// TRTC:null,
				// TIM2:null
			}
		},
		onLoad(options) {
			// this.TRTC = new TRTC(this)
			// console.log(this.TRTC,'少时诵诗书少时诵诗书是撒是撒是撒')
			// // 远端用户推送视频
			// this.TRTC.on(this.TRTC.EVENT.REMOTE_VIDEO_ADD, (event) => {
			//   console.log('* room REMOTE_VIDEO_ADD',  event)
			//   this.shoudaoshow=true;
			// })

			var that = this;
			// recorderManager.onStop(function(res) {
			// 	if (that.sendVioceFlag) {
			// 		const message = that.tim.createAudioMessage({
			// 			to: that.userId,
			// 			conversationType: TIM.TYPES.CONV_C2C,
			// 			payload: {
			// 				file: res
			// 			}
			// 		})
			// 		that.tim.sendMessage(message).then(function(res) {
			// 			that.getMessage(that.conversationId);
			// 		})
			// 	}

			// });
			this.autoHeight = uni.getSystemInfoSync().statusBarHeight;
			let option = {
				SDKAppID: 1600049908
			}
			this.tim = TIM.create(option);

			uni.$on('conversationData', function(options) {
				console.log(options, 'optionsoptions')
				that.conversationId = options.conversationID;
				//对方资料
				that.nick = options.userProfile.nick;
				that.avatar = options.userProfile.avatar;
				that.userId = options.userProfile.userID;
			});
			uni.$emit('send')
			// uni.$off('conversationData')
			//获取消息列表
			this.getMessage(this.conversationId);
			//获取个人资料
			this.getMyProfile();
			//清空未读
			this.clearUnRead();

			// this.TIM = new TIM(this)
			console.log(TIM.TYPES, '1111111111111111')

			this.tim.on(TIM.EVENT.MESSAGE_RECEIVED, this.onMessageReceived)
		},
		onShow() {
			this.shoudaoshow = false;
			this.getMessage(this.conversationId);
		},
		computed: {
			// intIntervalTime() {
			// 	// 用于显示整数的秒数
			// 	console.log(Math.round(this.intervalTime));
			// 	return Math.round(this.intervalTime);
			// }
		},
		methods: {
			onMessageReceived(event) {
				// event.data - 存储 Message 对象的数组 - [Message]
				const messageList = event.data;
				console.log(messageList)
				messageList.forEach((message) => {
					if (message.type === TIM.TYPES.MSG_TEXT) {
						this.getMessage(this.conversationId);
						// 文本消息 - https://web.sdk.qcloud.com/im/doc/v3/zh-cn/Message.html#.TextPayload
					} else if (message.type === TIM.TYPES.MSG_IMAGE) {
						this.getMessage(this.conversationId);
						// 图片消息 - https://web.sdk.qcloud.com/im/doc/v3/zh-cn/Message.html#.ImagePayload
					} else if (message.type === TIM.TYPES.MSG_VIDEO) {
						this.getMessage(this.conversationId);
						// 视频消息 - https://web.sdk.qcloud.com/im/doc/v3/zh-cn/Message.html#.VideoPayload
					} else if (message.type === TIM.TYPES.MSG_CUSTOM) {
						this.getMessage(this.conversationId);
						this.shoudaoshow = true;
						// 自定义消息 - https://web.sdk.qcloud.com/im/doc/v3/zh-cn/Message.html#.CustomPayload
					}
				})
			},

			previewImage(url) {
				uni.previewImage({
					urls: [url]
				})
			},
			/* 获取消息列表 */
			getMessage(conversationId) {
				var that = this;
				that.tim.getMessageList({
					conversationID: conversationId,
					count: 15
				}).then(function(res) {
					console.log("消息列表", res)
					that.messageData = res.data;
					that.currentMessage = "id" + (that.messageData.messageList.length - 1)

				})
			},
			/* 发送文本消息 */
			sendMessage() {
				var that = this;
				let message = that.tim.createTextMessage({
					to: that.userId,
					conversationType: TIM.TYPES.CONV_C2C,
					payload: {
						text: that.message
					}
				})
				that.tim.sendMessage(message).then(function(res) {
					that.message = ''
					that.getMessage(that.conversationId);
				})
			},
			/* 获取个人资料 */
			getMyProfile() {
				var that = this;
				// this.tim.getMyProfile().then(function(res) {
				// 	that.myProfile = res.data;
				// })
				that.$api({
					url: '/getUserInfo',
					method: 'get',
					data: {
						token: uni.getStorageSync("token")
					},
				}).then(res => {
					if (res.code == 1) {
						that.myProfile = res.data
					}
				})
			},
			/* 下拉查看消息 */
			refresh() {
				var that = this;
				that.refreshFlag = true;
				if (!that.messageData.isCompleted) {
					that.getHistoryMessage();
				} else {
					uni.showToast({
						title: '没有更多了',
						icon: 'none'
					})
					setTimeout(function() {
						that.refreshFlag = false;
					}, 1000)

				}
			},
			/* 获取历史消息 */
			getHistoryMessage() {
				var that = this;
				that.tim.getMessageList({
					conversationID: that.conversationId,
					nextReqMessageID: that.messageData.nextReqMessageID,
					count: 15
				}).then(function(res) {
					that.messageData.isCompleted = res.data.isCompleted;
					that.messageData.nextReqMessageID = res.data.nextReqMessageID;
					that.messageData.messageList.unshift(...res.data.messageList);
					that.refreshFlag = false;
					//判断是否有交换微信信息 如果有则标记
					res.data.messageList.forEach((item, index) => {
						if (item.payload.data == 'refuseResume' || item.payload.data == 'resume') {
							that.resumeFlag = true;
						} else if (item.payload.data == 'fromWechat' || item.payload.data ==
							'refuseWechat') {
							that.weChatFlag = true;
						}
					})
				})
			},
			/* 清空未读消息 */
			clearUnRead() {
				var that = this;
				this.tim.setMessageRead({
					conversationID: that.conversationId
				}).then(function(res) {
					console.log("清空未读", res)
				})
			},

			/* 显示表情 */
			emojiShowClick() {
				var that = this;
				this.emojiShow = !this.emojiShow;
				if (this.emojiShow) {
					this.moreShow = false
					that.currentMessage = "id" + (that.messageData.messageList.length - 2)
				} else {
					that.currentMessage = "id" + (that.messageData.messageList.length - 1)
				}
			},
			/* 选择表情 */
			emojiClick(item) {
				this.message += item;
			},
			/* 更多 */
			moreShowClick() {
				var that = this;
				this.moreShow = !this.moreShow
				if (this.moreShow) {
					this.emojiShow = false;
					that.currentMessage = "id" + (that.messageData.messageList.length - 2)
				} else {
					that.currentMessage = "id" + (that.messageData.messageList.length - 1)
				}
			},
			/* 发送图片*/
			sendImage() {
				var that = this;
				// uni-app 发送图片
				// 微信小程序从基础库 2.21.0 开始， wx.chooseImage 停止维护，请使用 uni.chooseMedia 代替
				// 1. 选择图片

				// uni.chooseMedia({
				// 	count: 1,
				// 	mediaType: ['image'], // 图片
				// 	success: function(res) {
				// 		console.log("图片", res)
				// 		let message = that.tim.createImageMessage({
				// 			to: that.userId,
				// 			conversationType: TIM.TYPES.CONV_C2C,
				// 			payload: {
				// 				file: res
				// 			},
				// 			onProgress: function(event) {
				// 				console.log('file uploading:', event)
				// 			}
				// 		});
				// 		that.tim.sendMessage(message).then(function(res) {
				// 			that.getMessage(that.conversationId);
				// 		})
				// 	}
				// });



				uni.chooseImage({
					count: 1,
					sizeType: ['original'],
					success: function(res) {
						console.log("图片", res)
						let message = that.tim.createImageMessage({
							to: that.userId,
							conversationType: TIM.TYPES.CONV_C2C,
							payload: {
								file: res
							},
							onProgress: function(event) {
								console.log('file uploading:', event)
							}
						});
						that.tim.sendMessage(message).then(function(res) {
							that.getMessage(that.conversationId);
						})
					}
				});


			},
			/* 开始录音 */
			startVioce() {
				uni.showLoading({
					title: '录音中...'
				})
				this.timer = setInterval(() => {
					this.intervalTime += 0.5;
					if (this.intervalTime >= 0.5 && !this.isRecord) {
						console.log("开始录音");
						this.isRecord = true;
						this.intervalTime = 0;
						recorderManager.start({
							format: "mp3"
						});
					}
				}, 500);
			},
			/* 结束录音 */
			endVioce() {
				uni.hideLoading();
				var that = this;
				if (this.intervalTime <= 0.5) {
					uni.showToast({
						title: '录音太短了',
						icon: 'error'
					});
					this.sendVioceFlag = false;
					clearInterval(this.timer);
					recorderManager.stop();
					this.isRecord = false;
				} else {
					this.sendVioceFlag = true;
					clearInterval(this.timer);
					if (this.isRecord) {
						setTimeout(() => {
							console.log("结束")
							recorderManager.stop();
							this.isRecord = false;
						}, 500); //延迟小段时间停止录音, 更好的体验
					}
				}

			},
			/* 播放语音 */
			playVioce(voicePath) {
				innerAudioContext.src = voicePath;
				innerAudioContext.play();
			},
			/* 发送视频 */
			sendVideo() {
				var that = this;
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera', 'album'], // album 从相册选视频，camera 使用相机拍摄，默认为：['album', 'camera']
					maxDuration: 60, // 设置最长时间60s
					camera: 'back', // 后置摄像头
					success: function(res) {
						let message = that.tim.createVideoMessage({
							to: that.userId,
							conversationType: TIM.TYPES.CONV_C2C,
							payload: {
								file: res
							},
							onProgress: function(event) {
								console.log('file uploading:', event)
							}
						});
						// 2. 发送消息
						that.tim.sendMessage(message).then(function(imResponse) {
							// 发送成功
							console.log("视频发送成功");
							that.getMessage(that.conversationId);
						})
					}
				})

			},
			/* 视频通话 */
			call(e) {
				//sdkAppID自己申请
				// var	userID= new Date().getTime().toString(16).split('').reverse().join('');
				// var userSig=genTestUserSig(userID).userSig

				this.$api({
					url: '/getUserInfo',
					method: 'get',
					data: {
						token: uni.getStorageSync("token")
					},
				}).then(res => {
					if (res.code == 1) {
						this.$api({
							url: '/user/getImUserSign',
							method: 'post',
							data: {
								token: uni.getStorageSync("token"),
								user_id: res.data.id
							},
						}).then(res => {
							if (res.code == 1) {
								// 2. 发送消息

								// uni.navigateTo({
								// 	url: '/TXIM/pages/chat/trtc_room?roomID='+res.data.userId+'&&sdkAppID=1600049908&&userID=' +
								// 		res.data.userId + "&&userSig=" + res.data.userSign
								// })
								uni.navigateTo({
									url: '/TXIM/pages/chat/trtc_room_h5?userID=' + res.data
										.userId + "&&userSig=" + res.data.userSign +
										"&&callUserID=" + this.conversationId + '&&type=' + e
								})
							}
						})
					}
				})
			},

		}
	}
</script>

<style>
	@font-face {
		font-family: 'iconfont';
		/* Project id 2819500 */
		src: url('https://at.alicdn.com/t/font_2819500_0yamocn6pku.woff2?t=1640227023816') format('woff2'),
			url('https://at.alicdn.com/t/font_2819500_0yamocn6pku.woff?t=1640227023816') format('woff'),
			url('https://at.alicdn.com/t/font_2819500_0yamocn6pku.ttf?t=1640227023816') format('truetype');
	}

	page {
		background-color: #F5F5F5;
		height: 100vh;
	}

	.maindiv {
		position: relative;
		height: 79%;
	}

	.maindiv_emoji {
		position: relative;
		height: 63.5%;
	}

	.shipindiv {
		position: absolute;
		top: 20rpx;
		left: 40rpx;
		width: 670rpx;
		height: 80rpx;
		background: #FF3636;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #fff;
		text-align: center;
		line-height: 80rpx;
		z-index: 100;
	}

	.maxTop {
		height: 12%;
		background: url(https://flash-cloud.oss-cn-hangzhou.aliyuncs.com/bg.png);
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 30rpx;
	}

	.minTop {
		width: 100%;
		height: 150rpx;
		background: url(https://flash-cloud.oss-cn-hangzhou.aliyuncs.com/bg.png);
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 30rpx;
	}

	.a1 {
		font-family: iconfont;
		color: #FFFFFF;
		font-size: 40rpx;
		margin-right: 20rpx;
		margin-top: 70rpx;

	}

	.a2 {
		text-align: center;
		color: #FFFFFF;
		width: 75%;
	}

	.a3 {
		font-size: 32rpx;
		margin-top: 70rpx;
	}

	.a4 {
		font-size: 20rpx;
		margin-top: 10rpx;
	}

	.a5 {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		height: 8%;
		align-items: center;
		background-color: #FFFFFF;
	}

	.a6 {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.a7 {
		font-family: iconfont;
		font-size: 40rpx;
		color: #4DC9C0;
	}

	.a7_1 {
		font-family: iconfont;
		font-size: 40rpx;
		color: #C0C0C0;
	}

	.a8 {
		font-size: 22rpx;
		margin-top: 15rpx;
	}

	.a8_1 {
		font-size: 22rpx;
		margin-top: 15rpx;
		color: #C0C0C0;
	}

	.a9 {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.b1 {
		font-family: iconfont;
		font-size: 50rpx;
		color: #3FCF77;
	}

	.b1_1 {
		font-family: iconfont;
		font-size: 50rpx;
		color: #C0C0C0;
	}

	.b2 {
		font-size: 22rpx;
		margin-top: 10rpx;
	}

	.b2_1 {
		font-size: 22rpx;
		margin-top: 10rpx;
		color: #C0C0C0;
	}

	.b3 {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.b4 {
		font-family: iconfont;
		font-size: 50rpx;
		color: #E8A541;
	}

	.b5 {
		font-size: 22rpx;
		margin-top: 10rpx;
	}

	.b6 {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.b7 {
		font-family: iconfont;
		font-size: 40rpx;
		color: #F76F3F
	}

	.b8 {
		font-size: 22rpx;
		margin-top: 20rpx;
	}

	.b9 {
		height: 5%;
		background-color: #FFF1F1;
		color: #ff8f8f;
		font-size: 22rpx;
		text-align: center;
		line-height: 80rpx;
	}

	.c1 {
		display: flex;
		flex-direction: row;
		margin-top: 30rpx;
		padding-left: 30rpx;
	}

	.c1_2 {
		display: flex;
		flex-direction: row;
		margin-top: 30rpx;
	}

	.c2 {
		width: 80rpx;
		height: 80rpx;
		background-color: #eee;
		border-radius: 50%;
	}

	.c3 {
		border-radius: 15rpx;
		background-color: #FFFFFF;
		margin-left: 30rpx;
	}

	.c3_1 {
		border-radius: 15rpx;
		background-color: #9EEA6A;
		margin-right: 30rpx;
	}

	.c3_2 {
		border-radius: 15rpx;
		background-color: #FFFFFF;
		margin: 0 auto;
	}

	.c4 {
		width: 0;
		height: 0;
		border-top: 8rpx solid transparent;
		border-right: 8px solid #FFFFFF;
		border-bottom: 8rpx solid transparent;
		position: relative;
		left: -13rpx;
		top: 30rpx;
	}

	.c4_1 {
		width: 0;
		height: 0;
		border-top: 8rpx solid transparent;
		border-left: 8rpx solid #9EEA6A;
		border-bottom: 8rpx solid transparent;
		position: relative;
		top: 30rpx;
		left: -30rpx;
	}

	.c5 {
		color: #000000;
		font-size: 24rpx;
		padding-left: 15rpx;
		padding-right: 15rpx;
		letter-spacing: 2rpx;
		max-width: 410rpx;
		padding-bottom: 15rpx;
		padding-top: 20rpx;
	}

	.c5_1 {
		color: #000000;
		font-size: 24rpx;
		padding-left: 15rpx;
		padding-right: 15rpx;
		letter-spacing: 2rpx;
		max-width: 400rpx;
		padding-bottom: 15rpx;
		padding-top: 20rpx;
	}

	.c6 {
		display: flex;
		flex-direction: row;
		background-color: #FFFFFF;
		height: 10%;
		width: 100%;
		margin: 0 auto;
		align-items: center;
		justify-content: space-around;
	}

	.c7 {
		font-family: iconfont;
		font-size: 50rpx;
	}

	.c8 {
		width: 500rpx;
		background-color: #F5F5F5;
		height: 60rpx;
		margin-left: 20rpx;
		border-radius: 15rpx;
		font-size: 24rpx;
		padding-left: 10rpx;
	}

	.c8_1 {
		width: 530rpx;
		background-color: #F5F5F5;
		height: 60rpx;
		margin-left: 20rpx;
		border-radius: 15rpx;
		font-size: 24rpx;
		padding-left: 10rpx;
	}

	.c9 {
		font-family: iconfont;
		font-size: 50rpx;
		margin-left: 10rpx;
		color: #EE8B1F;
	}

	.d1 {
		text-align: center;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #08C05E;
		font-size: 24rpx;
		color: #FFFFFF;
		width: 100rpx;
		border-radius: 15rpx;
		margin-left: 10rpx;
	}

	.d2 {
		font-family: iconfont;
		font-size: 50rpx;
		margin-left: 10rpx;
		color: #EE8B1F;
	}



	.e2_1 {
		height: 60rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		color: #08C05E;
		width: 100%;
		text-align: center;
	}

	.d3 {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		padding-right: 30rpx;
		margin-top: 30rpx;
	}

	.v1 {
		height: calc(100vh - 180rpx - 120rpx - 70rpx - 200rpx);
	}

	.v2 {
		height: calc(100vh - 150rpx - 120rpx - 70rpx - 200rpx);
	}

	.d4 {
		text-align: center;
		font-size: 20rpx;
		color: #B9B9B9;
		height: 100rpx;
		line-height: 100rpx;
	}

	.d5 {
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: 1rpx solid #F1F1F1;
		height: 100rpx;
	}

	.d6 {
		width: 60rpx;
		height: 60rpx;
	}

	.d7 {
		padding-left: 10rpx;
		text-align: left;
	}

	.d8 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-left: 70rpx;
		padding-right: 70rpx;
		align-items: center;
		padding-top: 20rpx;
	}

	.d9 {
		height: 60rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		color: #C0C0C0
	}

	.e1 {
		height: 50rpx;
		width: 1rpx;
		background-color: #F1F1F1;
	}

	.e2 {
		height: 60rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		color: #18BC37;
	}

	.e2_1 {
		height: 60rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		color: #08C05E;
		width: 100%;
		text-align: center;
	}

	.e2_2 {
		height: 60rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		color: #C0C0C0;
	}

	.c5_2 {
		color: #C0C0C0;
		font-size: 24rpx;
		padding-left: 15rpx;
		padding-right: 15rpx;
		letter-spacing: 2rpx;
		max-width: 410rpx;
		padding-bottom: 15rpx;
		padding-top: 10rpx;
	}

	.emoji {
		display: flex;
		flex-direction: row;
		height: 15%;
		flex-wrap: wrap;
		overflow-y: scroll;
		background-color: #FFFFFF;

	}

	.sv {
		/* height: 79%; */
		height: 100%;
	}

	.sv_emoji {
		/* height: 63.5%; */
		height: 100%;
	}

	.emoji_img {
		margin-left: 20rpx;
		margin-top: 10rpx;
		font-size: 34rpx;
	}

	.e3 {
		display: flex;
		flex-direction: row;
		height: 15%;
		flex-wrap: wrap;
		overflow-y: scroll;
		background-color: #FFFFFF;
		justify-content: space-around;
		font-size: 24rpx;
		color: #666666;
	}

	.e4 {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 150rpx;
	}

	.e5 {
		font-family: iconfont;
		font-size: 50rpx;
	}

	.e5_1 {
		font-family: iconfont;
		font-size: 50rpx;
		color: #EE8B1F;
	}

	.e6 {
		margin-top: 20rpx;
	}
</style>